<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
    <title>收银台</title>

    <style>
        :root {
            --color-background: #fae3ea;
            --font-family-base: Poppin, sans-serif;
            --font-size-h1: 1.25rem;
            --font-size-h2: 1rem;
        }

        * {
            -webkit-box-sizing: inherit;
            box-sizing: inherit;
        }

        html {
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
        }

        body {
            font-family: Poppin, sans-serif;
            font-family: var(--font-family-base);
            line-height: 1.5;
            margin: 0;
            min-height: 100vh;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            justify-items: center;
            place-items: center;
        }

        button {
            border: 0;
            color: inherit;
            cursor: pointer;
            font: inherit;
        }

        fieldset {
            border: 0;
            margin: 20px 0;
            padding: 0;
        }

        h1 {
            font-size: 1.25rem;
            font-size: var(--font-size-h1);
            line-height: 1.2;
            margin-top: 0;
            margin-bottom: 1.5em;
        }

        h2 {
            font-size: 1rem;
            font-size: var(--font-size-h2);
            line-height: 1.2;
            margin-top: 0;
            margin-bottom: 0.5em;
        }

        legend {
            font-weight: 600;
            margin-bottom: 0.5em;
            padding: 0;
        }

        input {
            border: 0;
            color: inherit;
            font: inherit;
        }

        input[type="radio"] {
            accent-color: #2979ff;
        }

        .align {
            display: grid;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            justify-items: center;
            place-items: center;
        }

        .button {
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            background-color: #2979ff;
            border-radius: 999em;
            color: #fff;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            grid-gap: 0.5em;
            gap: 0.5em;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
            padding-top: 0.75em;
            padding-bottom: 0.75em;
            padding-left: 1em;
            padding-right: 1em;
            -webkit-transition: 0.3s;
            -o-transition: 0.3s;
            transition: 0.3s;
        }

        button:focus {
            outline: none;
        }

        .button-full {
            width: 95%;
        }


        .form__radios {
            display: grid;
            grid-gap: 1em;
            gap: 1em;
        }

        .form__radio {
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            background-color: #fefdfe;
            border-radius: 1em;
            -webkit-box-shadow: 0 0 1em rgba(0, 0, 0, 0.0625);
            box-shadow: 0 0 1em rgba(0, 0, 0, 0.0625);
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            padding: 1em;
        }

        .form__radio label {
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-flex: 1;
            -ms-flex: 1;
            flex: 1;
            grid-gap: 1em;
            gap: 1em;
        }

        .header {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
            padding-bottom: 0.2em;
            padding-left: 0.1em;
            padding-right: 0.1em;
        }

        .icon {
            height: 2em;
            display: inline-block;
            fill: currentColor;
            width: 2em;
            vertical-align: middle;
        }

        .tips {
            position: fixed;
            font-size: 16px;
            top: 0px;
            height: 40px;
            line-height: 35px;
            background-color: #de4545;
            width: 100%;
            margin: 0;
            padding: 3px;
            color: #ffffff;
            text-align: center;
        }

        .hidden {
            display: none;
        }
    </style>
</head>
<body>

{foreach $pay_data as $key=>$item}
<input type="hidden" name="{$key}" value="{$item}">
{/foreach}

<div style="padding:25px;">
    <header class="header">
        <h1>订单支付</h1>
    </header>

    <fieldset>

        <legend>支付说明</legend>

        <div class="form__radios">

            <div class="form__radio">
                <label for="mastercard">
                    商品说明
                </label>
                {$pay_data.subject}
            </div>

            {if $pay_data.coupon_amount??''}
            <div class="form__radio">
                <label for="mastercard">
                    已优惠金额
                </label>
                <span>￥{:bcdiv($pay_data.coupon_amount,100,2)}元</span>
            </div>
            {/if}

            <div class="form__radio">
                <label for="mastercard">
                    支付金额
                </label>
                <span style="font-size: 18px">￥</span>
                <strong style="font-size: 28px;">{:bcdiv($pay_data.total_amount,100,2)}</strong>
                <span style="font-size: 18px">元</span>
            </div>
        </div>
    </fieldset>

    <fieldset>

        <legend>选择支付方式</legend>

        <div class="form__radios">
            {foreach $platforms as $item}
            <div class="form__radio">
                <label for="mastercard">
                    <img class="icon" src="{$item.icon}">
                    {$item.name}
                </label>
                <input name="platform_id" type="radio" data-key="{$item.key}">
            </div>
            {/foreach}
        </div>
    </fieldset>
</div>


<div style="margin-top: 20px;padding: 0 20px;">
    <button class="button button-full" id="confirm-btn">
        确认支付￥{:bcdiv($pay_data.total_amount,100,2)}
    </button>
</div>

<div id="ali-pay-form">

</div>

<div class="tips hidden">

</div>

</body>
</html>

<script src="{:config('pay.assets.jquery')}"></script>
<script>

  let platform_id = ''

  let get_params = function () {
    return {
      channel_id: $('[name=channel_id]').val(),
      platform_id: $('[name=platform_id]').val(),
      scene: $('[name=scene]').val(),
      trade_type: $('[name=trade_type]').val(),
      order_no: $('[name=order_no]').val(),
      subject: $('[name=subject]').val(),
      total_amount: $('[name=total_amount]').val(),
      account: $('[name=account]').val(),
      open_id: $('[name=open_id]').val(),
    }
  }

  let success = function (pay_no) {
    if (pay_no) {
      location.href = `/pay/success/${pay_no}`
    }
  }

  let showTips = function (message, time) {
    time = parseInt(time)
    if (isNaN(time) || time <= 0) {
      time = 5
    }
    if (message.length <= 0) {
      return false
    }
    let tip = $('.tips')
    tip.html(message)
    tip.fadeIn('slow')
    setTimeout(function () {
      tip.fadeOut('slow')
    }, time * 1000)
  }

  function onBridgeReady (pay_data, pay_no) {
    WeixinJSBridge.invoke(
      'getBrandWCPayRequest', pay_data,
      function (res) {
        if (res.err_msg === 'get_brand_wcpay_request:ok') {
          setTimeout(function () {
            success(pay_no)
          }, 2000)
        } else {
          setTimeout(function () {
            window.close()
          }, 2000)
        }
      })
  }

  if (typeof WeixinJSBridge == 'undefined') {
    if (document.addEventListener) {
      document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false)
    } else if (document.attachEvent) {
      document.attachEvent('WeixinJSBridgeReady', onBridgeReady)
      document.attachEvent('onWeixinJSBridgeReady', onBridgeReady)
    }
  } else {

  }

  $(function () {

    $('#confirm-btn').on('click', function () {
      let data = get_params()
      data.platform_id = platform_id

      if (platform_id.length <= 0) {
        showTips('请选择支付方式', 3)
        return false
      }

      if (platform_id === 'wx') {
        data.trade_type = 'JSAPI'
      } else {
        data.trade_type = 'QUICK_WAP_WAY'
      }

      $.ajax({
        url: '/pay/center',
        type: 'post',
        data: data,
        success: function (resp) {
          if (resp.code) {
            showTips(resp.msg, 3)
          } else {
            let data = resp.data
            if (data.platform_id == 'wx') {
              onBridgeReady(data.pay_data)
            } else if (data.platform_id == 'ali') {
              $('#ali-pay-form').html(data.pay_data)
            }
          }
        }
      })
    })

    $('[name=platform_id]').on('click', function () {
      let val = $(this).data('key')
      if (val) {
        platform_id = val
      }
    })
  })


</script>

